<template>
	<view class="app">
		<view class="search-div"><u-search @custom="searchlist" @search="searchlist" placeholder="请输入用户昵称" v-model="keyword"></u-search></view>
		<u-gap height="60"></u-gap>
		<view class="">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in List" :key="index">
					<view class="u-p-32 user-list-div">
						<view class="user-item u-flex u-flex-items-center u-flex-between">
							<view class="u-flex u-flex-items-center">
								<image :src="item.picurl"></image>
								<view class="u-flex-y user-info u-flex-1 u-m-l-20">
									<text class="u-line-1">{{ item.nickname }}</text>
									<text>ID:{{ item.id }}</text>
									<view class="">
										<text>来源:{{ item.type | gettype }}</text>
									</view>
									<text>状态:{{ item.status == 1 ? '正常' : '禁用' }}</text>
								</view>
							</view>

							<view class="" @click="showedit(index)"><u-icon size="20" name="edit-pen-fill"></u-icon></view>
						</view>
						<u-line :margin="'30rpx 0rpx'"></u-line>
						<view class="cash-item u-flex u-m-t-20">
							<text class="u-flex-1">积分:{{ item.cash.integral }}</text>
							<text class="u-flex-1">余额:{{ item.cash.total }}</text>
							<text class="">手机:{{ item.mobile || '无' }}</text>
						</view>
						<u-transition :show="item.show" mode="fade">
							<view class="fixd-div">
								<u-grid :customStyle="'width:100%;flex-wrap: nowrap;'" :border="false" col="4">
									<u-grid-item @click.native.stop="handle(i, index)" v-for="(data, i) in btnList" :index="i" :key="i">
										<text class="iconfont  el-sc-bianji"></text>
										<text class="grid-text">{{ data.title }}</text>
									</u-grid-item>
								</u-grid>
								<view class="close-icon" @click="item.show = false"><u-icon size="20" color="#FFFFFF" name="close-circle"></u-icon></view>
							</view>
						</u-transition>
					</view>
				</u-list-item>
				<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
			</u-list>
		</view>
		<u-popup :show="show" mode="center" :round="10" @close="closepup" @open="openpup">
			<view class="content-box u-p-l-20 u-p-r-20" v-if="show_type == 1">
				<u-cell-group :border="false">
					<u-cell :border="false" title="用户名称:" :value="userdetail.nickname"></u-cell>
					<u-cell :border="false" title="用户ID:" :value="userdetail.id"></u-cell>
					<u-cell :border="false" title="联系电话:" :value="userdetail.mobile"></u-cell>
					<u-cell :border="false" title="用户等级:" :value="userdetail.levelname"></u-cell>
					<u-cell :border="false" title="用户来源:">
						<text slot="right-icon">{{ userdetail.type | gettype }}</text>
					</u-cell>
					<u-cell :border="false" title="注册时间:" :value="userdetail.create_time"></u-cell>
					<u-cell :border="false" title="累计成交订单数:" :value="usertotal.order_number"></u-cell>
					<u-cell :border="false" title="累计成交金额:"><u-text mode="price" :text="usertotal.order_money" slot="right-icon"></u-text></u-cell>
					<u-cell :border="false" title="累计退款订单数:" :value="usertotal.refund_number"></u-cell>
					<u-cell :border="false" title="累计退款金额:"><u-text mode="price" :text="usertotal.refund_money" slot="right-icon"></u-text></u-cell>
				</u-cell-group>
			</view>
			<view class="content-box u-p-20" v-if="show_type == 2">
				<u-form :model="form" ref="uForm" :labelWidth="80">
					<u-form-item label="用户名称:">
						<text>{{ userdetail.nickname }}</text>
					</u-form-item>
					<u-form-item label="当前积分:">
						<text>{{ userdetail.cash ? userdetail.cash.integral : '' }}</text>
					</u-form-item>
					<u-form-item label="变更类型:">
						<u-radio-group v-model="form.type" placement="row">
							<u-radio class="u-m-r-20" :name="0" label="增加"></u-radio>
							<u-radio class="u-m-r-20" :name="1" label="减少"></u-radio>
							<u-radio :name="2" label="最终积分"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item prop="num" label="变更积分"><u-input type="digit" v-model.number="form.num"></u-input></u-form-item>
					<u-form-item prop="password" label="操作密码"><u-input type="password" v-model="form.password"></u-input></u-form-item>
					<u-form-item label="备注"><u-input v-model="form.remark" placeholder="请输入内容"></u-input></u-form-item>
					<u-gap height="10"></u-gap>
					<u-button type="primary" shape="circle" @click="saveScore">提交</u-button>
				</u-form>
			</view>
			<view class="content-box u-p-20" v-if="show_type == 3">
				<u-form :model="form" ref="uForm" :labelWidth="80">
					<u-form-item label="用户名称:">
						<text>{{ userdetail.nickname }}</text>
					</u-form-item>
					<u-form-item label="当前余额:" v-if="userdetail.cash"><u-text mode="price" :text="userdetail.cash.total"></u-text></u-form-item>
					<u-form-item label="变更类型:">
						<u-radio-group v-model="form.type" placement="row">
							<u-radio class="u-m-r-20" :name="0" label="增加"></u-radio>
							<u-radio class="u-m-r-20" :name="1" label="减少"></u-radio>
							<u-radio :name="2" label="最终金额"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item prop="amount" label="变更金额"><u-input type="digit" v-model="form.amount"></u-input></u-form-item>
					<u-form-item prop="password" label="操作密码"><u-input type="password" v-model="form.password"></u-input></u-form-item>
					<u-form-item label="备注"><u-input v-model="form.remark" placeholder="请输入内容"></u-input></u-form-item>
				</u-form>
				<u-gap height="10"></u-gap>
				<u-button type="primary" shape="circle" @click="saveMoney">提交</u-button>
			</view>
		</u-popup>
		<u-modal :show="show_model" @cancel="show_model = false" :showCancelButton="true" @confirm="changestatus" ref="uModal" :asyncClose="true" :content="content"></u-modal>
	</view>
</template>
<script>
export default {
	data() {
		return {
			keyword: '',
			List: [],
			page: 1,
			status: 'loadmore',
			loadingText: '努力加载中',
			loadmoreText: '轻轻上拉',
			nomoreText: '实在没有了',
			btnList: [
				{
					title: '用户详情'
				},
				{
					title: '积分'
				},
				{
					title: '余额'
				},
				{
					title: '黑名单'
				}
			],
			index: 0,
			show: false,
			userdetail: {},
			usertotal: {},
			levellist: [],
			show_type: 1,
			form: {
				user_id: '',
				type: 0, //变化类型:0:增加,1:减少,2:最终金额
				num: '',
				amount: '',
				remark: '',
				password: '',
				update_time: ''
			},
			rules: {
				num: [
					{
						type: 'number',
						required: true,
						message: '请输入变更积分',
						trigger: ['blur', 'change']
					}
				],
				amount: [
					{
						type: 'number',
						required: true,
						message: '请输入变更积分',
						trigger: ['blur', 'change']
					}
				],
				password: [
					{
						type: 'string',
						required: true,
						message: '请输入操作密码',
						trigger: ['blur', 'change']
					}
				]
			},
			content: '是否禁用该用户？',
			show_model: false
		};
	},
	onLoad() {
		this.getlist();
		this.getlevellist();
	},
	onReady() {},
	onPullDownRefresh() {
		this.page = 1;
		this.List = [];
		this.getlist();
		this.getlevellist();
	},
	filters: {
		gettype(type) {
			switch (type) {
				case 1:
					return '微信小程序';
					break;
				case 2:
					return '微信公众号';
					break;
				case 3:
					return 'h5';
					break;
			}
		}
	},
	methods: {
		changestatus() {
			let item = this.List[this.index];
			let data = {
				id: item.id,
				status: item.status == 1 ? 2 : 1,
				update_time: item.update_time
			};

			uni.$u.http
				.put('/madmin/user/' + data.id, data,{custom:{id:17}})
				.then(res => {
					this.show_model = false;
					this.changelist(data.id);
				})
				.catch(err => {});
		},
		showedit(i) {
			this.List.forEach(a => {
				a.show = false;
			});
			this.List[i].show = true;
		},
		openpup() {
			if (this.show_type != 1) {
				this.$refs.uForm.setRules(this.rules);
			}
		},
		//变更后改变列表内容
		changelist(id) {
			uni.$u.http
				.get('/madmin/user/' + id,{custom:{id:17}})
				.then(res => {
					let userdetail = res.msg;
					this.List[this.index].cash = userdetail.cash;
					this.List[this.index].status = userdetail.status;
					this.List[this.index].update_time = userdetail.update_time;
					this.List[this.index].show = false;
					this.show = false;
				})
				.catch(err => {});
		},
		//变更积分
		saveScore() {
			this.$refs.uForm
				.validate()
				.then(res => {
					let data = this.form;
					delete data.amount;
					uni.$u.http
						.put('/madmin/user/cash/integral/' + this.form.user_id, this.form,{custom:{id:17}})
						.then(res => {
							this.changelist(data.user_id);
						})
						.catch(err => {});
				})
				.catch(errors => {});
		},
		//变更余额
		saveMoney() {
			this.$refs.uForm
				.validate()
				.then(res => {
					let data = this.form;
					delete data.num;
					uni.$u.http
						.put('/madmin/user/cash/recharge/' + this.form.user_id, this.form,{custom:{id:17}})
						.then(res => {
							this.show = false;
						})
						.catch(err => {});
				})
				.catch(errors => {});
		},
		//获取用户等级
		getlevellist() {
			uni.$u.http
				.post('/madmin/membership/level/list?page=1&size=100', {},{custom:{id:17}})
				.then(res => {
					this.levellist = res.msg.data;
				})
				.catch(err => {});
		},
		//关闭弹窗
		closepup() {
			this.show = false;
		},
		//加载更多
		scrolltolower() {
			this.getlist();
		},
		//按钮集合
		handle(i, index) {
			this.index = index;
			let id = this.List[index].id;
			let status = this.List[index].status;

			switch (i) {
				case 0:
					this.show_type = 1;
					break;
				case 1:
					this.show_type = 2;
					break;
				case 2:
					this.show_type = 3;
					break;
				case 3:
					this.show_model = true;
					this.content = status == 1 ? '是否禁用该用户？' : '是否启用该用户？';
					break;
			}
			if (i != 3) {
				this.getdetail(id);
			}
		},
		searchlist() {
			this.page = 1;
			this.List = [];
			this.getlist();
		},
		//用户列表
		getlist() {
			this.status = 'loading';
			uni.$u.http
				.post('/madmin/user/list?page=' + this.page + '&size=10', {nickname: this.keyword},{custom:{id:17}})
				.then(res => {
					uni.stopPullDownRefresh();
					let json = res.msg;
					if (json.data.length > 0) {
						this.page++;
						let list = json.data;
						list.forEach(a => {
							a.show = false;
						});
						this.List = this.List.concat(list);
					} else {
						this.status = 'nomore';
					}
				})
				.catch(err => {});
		},
		//用户详情
		getdetail(id) {
			uni.$u.http
				.get('/madmin/user/' + id,{custom:{id:17}})
				.then(res => {
					this.userdetail = res.msg;
					this.userdetail.levelname = '普通用户';

					if (this.userdetail.level > 0) {
						let d = this.levellist.filter(a => {
							return a.level == this.userdetail.level;
						});
						if (d.length > 0) {
							this.userdetail.levelname = d[0].name;
						} else {
							this.userdetail.levelname = '普通用户';
						}
					}
					this.form = {
						user_id: this.userdetail.id,
						type: 0, //变化类型:0:增加,1:减少,2:最终金额
						num: '',
						remark: '',
						amount: '',
						password: '',
						update_time: this.userdetail.cash.update_time
					};
					this.getusertotal(id);
				})
				.catch(err => {});
		},
		//用户订单统计
		getusertotal(id) {
			uni.$u.http
				.get('/shop/statistic/user/total/' + id,{custom:{id:17}})
				.then(res => {
					this.usertotal = res.msg;
					this.show = true;
				})
				.catch(err => {});
		}
		//
	}
};
</script>
<style lang="scss">
.user-list-div {
	position: relative;
	width: 710rpx;
	background-color: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	margin: 10rpx auto;
}
.user-item {
	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.user-info {
		font-size: 24rpx;
		height: 150rpx;
		justify-content: space-between;
	}
}
.cash-item {
	font-size: 28rpx;
}
</style>
